{% load staticfiles %}
{% load utils %}
<!doctype html>
<html>
<head>
<meta charset="gbk">
<title>首页</title>
<meta name="keywords" content="博客" />
<meta name="description" content="网站" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="{% static 'myapp/reference/css/base.css'%}" rel="stylesheet">
<link href="{% static 'myapp/reference/css/index.css'%}" rel="stylesheet">
<link href="{% static 'myapp/reference/css/m.css'%}" rel="stylesheet">


<!--[if lt IE 9]>
<script src="{% static 'myapp/reference/js/modernizr.js' %} "></script>
<![endif]-->

</head>
<body>
<header class="header-navigation" id="header">
{% include 'myapp/reference/nav.html' %}
</header>
<article> 
  <!--banner begin-->
  <div class="banner">
    <div id="banner" class="fader">
      <li class="slide" ><a href="javascript:;" target="_blank"><img src="{% static 'myapp/reference/images/1.jpg' %} "><span class="imginfo">别让这些闹心的套路，毁了你的网页设计!</span></a></li>
      <li class="slide" ><a href="javascript:;" target="_blank"><img src="{% static 'myapp/reference/images/2.jpg' %} "><span class="imginfo">网页中图片属性固定宽度，如何用js改变大小</span></a></li>
      <li class="slide" ><a href="javascript:;" target="_blank"><img src="{% static 'myapp/reference/images/3.jpg' %} "><span class="imginfo">个人博客，属于我的小世界！</span></a></li>
      <div class="fader_controls">
        <div class="page prev" data-target="prev">&lsaquo;</div>
        <div class="page next" data-target="next">&rsaquo;</div>
        <ul class="pager_list">
        </ul>
      </div>
    </div>
  </div>
  <!--banner end-->
  <div class="toppic">
    <li> <a href="javascript:;" target="_blank"> <i><img src="{% static 'myapp/reference/images/1.jpg' %} "></i>
      <h2>安静地做一个爱设计的女子</h2>
      <span>学无止境</span> </a> </li>
    <li> <a href="javascript:;" target="_blank"> <i><img src="{% static 'myapp/reference/images/2.jpg' %} "></i>
      <h2>个人博客，属于我的小世界！</h2>
      <span>学无止境</span> </a> </li>
  </div>
  <main>
    <div class="news_box">
      <ul>
        <li><i><a href="javascript:;"><img src="{% static 'myapp/reference/images/1.jpg' %} "></a></i>
          <h3><a href="javascript:;">html5个人博客模板《simple》</a></h3>
        </li>
        <li><i><a href="javascript:;"><img src="{% static 'myapp/reference/images/2.jpg' %} "></a></i>
          <h3><a href="javascript:;">html5古典个人博客模板《青砖屋檐》</a></h3>
        </li>
        <li><i><a href="javascript:;"><img src="{% static 'myapp/reference/images/3.jpg' %} "></a></i>
          <h3><a href="javascript:;">第二届 优秀个人博客模板比赛参选活动</a></h3>
        </li>
        <li><i><a href="javascript:;"><img src="{% static 'myapp/reference/images/4.jpg' %} "></a></i>
          <h3><a href="javascript:;">html5个人博客模板《More》</a></h3>
        </li>
        <li><i><a href="javascript:;"><img src="{% static 'myapp/reference/images/5.jpg' %} "></a></i>
          <h3><a href="javascript:;">D设计师博客-一个热爱生活的设计师</a></h3>
        </li>
        <li><i><a href="javascript:;"><img src="{% static 'myapp/reference/images/6.jpg' %} "></a></i>
          <h3><a href="javascript:;">个人博客用帝国cms 自定义页面 灵动标签调用网站所有信息</a></h3>
        </li>
      </ul>
    </div>
    <div class="pics">
      <ul>
        <li><i><a href="/news/life/2018-06-17/873.html" target="_blank"><img src="{% static 'myapp/reference/images/p1.jpg' %} "></a></i><span>安静地做一个爱设计的女子</span></li>
        <li><i><a href="/news/life/2018-04-27/816.html" target="_blank"><img src="{% static 'myapp/reference/images/p2.jpg' %} "></a></i><span>个人博客，属于我的小世界！（可以是广告）</span></li>
        <li><i><a href="/jstt/bj/2015-01-09/740.html" target="_blank"><img src="{% static 'myapp/reference/images/p3.jpg' %} "></a></i><span>【匆匆那些年】总结个人博客经历的这四年…</span></li>
      </ul>
    </div>
    
    <div class="blogtab">
    <ul id="blogtab">
      <li class="current">最新文章</li>
      <li><a href="javascript:void(0);">心得笔记</a></li>
      <li><a href="javascript:void(0);">CSS3|Html5</a></li>
      <li><a href="javascript:void(0);">网站建设</a></li>
      <li><a href="javascript:void(0);">文字标签</a></li>
      <li><a href="javascript:void(0);">文字广告</a></li>
    </ul> 
    {%for post in posts %}
      <div class="blogs" data-scroll-reveal="enter bottom over 1s" >
        <h3 class="blogtitle"><a href="/detail/?pid={{post.id}}" >{{post.title}}</a></h3>
        
        {%if forloop.counter|divisibleby:2%}
        <span class="blogpic"><a href="javascript:;" title=""><img src="{% static 'myapp/reference/images/1.jpg' %} " alt=""></a></span>
        {%elif forloop.counter|divisibleby:3%}
           <span class="bigpic"><a href="javascript:;" title=""><img src="{% static 'myapp/reference/images/1.jpg' %} " alt=""></a></span>
        {%else%}
        <span class="bplist"><a href="javascript:;" title="">
        <li><img src="{% static 'myapp/reference/images/2.jpg' %} " alt=""></li>
        <li><img src="{% static 'myapp/reference/images/3.jpg' %} " alt=""></li>
        <li><img src="{% static 'myapp/reference/images/4.jpg' %} " alt=""></li>
        </a></span>
        {%endif%}
        <p class="blogtext">{{post.content|prettify:'p'}}</p>
        <div class="bloginfo">
          <ul>
            <li class="author"><a href="javascript:void(0);">{{post.author}}</a></li>
            <li class="lmname">
              {%with tags=post.tag|tags_split %}
              {%for tag in tags %}
              <a href="javascript:void(0);">{{tag}} </a>
              {%endfor%}
              {%endwith%}
            </li>
            <li class="timer">{{post.publish_time}}</li>
            <li class="view"><span>662</span>已阅读</li>
            <li class="like">{{post.point_up_num}}</li>
          </ul>
        </div>
      </div>
    {%endfor%}
    </div>
  </main>



  <aside class="r_box" >
      <div class="about_me">
        <h2>博主简介</h2>
        <ul>
          <i><img src="{% static 'myapp/reference/images/4.jpg' %} "></i>
          <p><b>Dragon-L</b></br>数据挖掘与分析师</br>
          深度学习算法工程师</br>
          Python全栈开发工程师
         </p>
        </ul>
      </div>
      <div class="wdxc">
        <h2>图片精选</h2>
        <ul>
          <li><a href="javascript:;"><img src="{% static 'myapp/reference/images/7.jpg' %} "></a></li>
          <li><a href="javascript:;"><img src="{% static 'myapp/reference/images/8.jpg' %} "></a></li>
          <li><a href="javascript:;"><img src="{% static 'myapp/reference/images/9.jpg' %} "></a></li>
          <li><a href="javascript:;"><img src="{% static 'myapp/reference/images/10.jpg' %} "></a></li>
          <li><a href="javascript:;"><img src="{% static 'myapp/reference/images/11.jpg' %} "></a></li>
          <li><a href="javascript:;"><img src="{% static 'myapp/reference/images/12.jpg' %} "></a></li>
        </ul>
      </div>
      <div class="fenlei">
        <h2>文章分类</h2>
        <ul>
          <li><a href="javascript:;">学无止境（33）</a></li>
          <li><a href="javascript:;">日记（19）</a></li>
          <li><a href="javascript:;">慢生活（520）</a></li>
          <li><a href="javascript:;">美文欣赏（40）</a></li>
        </ul>
      </div>
      <div class="tuijian">
        <h2 id="tab"><a href="javascript:void(0);"class="current">活动公告</a><a href="javascript:void(0);">点击排行</a><a href="javascript:void(0);">站长推荐</a></h2>
        
     <div id="content">
        
        <ul style="display:block;">
          <li><a href="javascript:;">【活动作品】柠檬绿兔小白个人博客模板</a></li>
          <li><a href="javascript:;">帝国cms 列表页调用子栏目，没有则不显示栏目名称</a></li>
          <li><a href="javascript:;">2014年度优秀个人博客评选活动</a></li>
          <li><a href="javascript:;">你是什么人便会遇上什么人</a></li>
          <li><a href="javascript:;">帝国cms 列表页调用子栏目，没有则不显示栏目名称</a></li>
          <li><a href="javascript:;">第二届 优秀个人博客模板比赛参选活动</a></li>
          <li><a href="javascript:;">个人博客模板《绅士》后台管理</a></li>
        </ul>

        <ul>
          {%for post in r_latest_posts%}
          <li><a href="/detail/?pid={{post.id}}">{{post.title}}</a></li>
          {%endfor%}
        </ul>

        <ul>
        {%for post in r_recommend_posts%}
          <li><a href="/detail/?pid={{post.id}}">{{post.title}}</a></li>
        {%endfor%}
        </ul>

       </div>
      </div>
      <div class="guanzhu">
        <h2>扫码关注微信公众号</h2>
        <ul>
          <img src="{% static 'myapp/reference/images/wxQR.jpg' %} ">
        </ul>
      </div>

  </aside>
</article>
{% include 'myapp/reference/copyright.html' %}
<a href="javascript:void(0);" class="cd-top"></a>

<script type="text/javascript" src="{% static 'myapp/reference/js/jquery.easyfader.min.js' %}"></script>
<script type="text/javascript" src="{% static 'myapp/reference/js/hc-sticky.js' %}"></script>
<script type="text/javascript" src="{% static 'myapp/reference/js/comm.js' %}"></script>
<script src="{% static 'myapp/reference/js/scrollReveal.js' %}"></script>

</body>
</html>
